<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 300px;
				background: blueviolet;
			}
			.slotLeft{
				width: 200px;
				height: 100px;
				background: yellow;
				float: left;
			}
			.slotRight{
				width: 200px;
				height: 100px;
				background: #00B5FA;
				float: right;
			}
		</style>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<com>
				<template v-slot:left>
					<h3>我是左边的插槽</h3>
				</template>
				
				<template v-slot:right>
					<p>我是右边的插槽</p>
				</template>
			</com>
		</div>
		
		
	<template id="t1">
		<div class="box">
			<div class="slotLeft">
				<slot name="left"></slot>
			</div>
			<div class="slotRight">
				<slot name="right"></slot>
			</div>
		</div>
	</template>	
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				
			},
			components:{
				com:{
					template:"#t1"
				}
			}
		})
	</script>
	<!-- 具名插槽
	插槽有一个name属性。与匿名插槽相对，加了name属性的匿名插槽就是具名插槽。
	组件通过在template上写v-slot:name来使用具名插槽
	注意 v-slot 只能添加在template标签上
	(只有一种例外情况)。
	例外情况（被废弃的slot=‘name’）
	带slot属性的具名插槽自 2.6.0 起被废弃，vue3.x被完全废弃。只有vue3之前的cli可以使用。
	跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。
	 
	 -->
	</body>
</html>
